<template>
  <el-dialog width="60%" title="分配权限" 
  :visible.sync="treeDialogVisible"
  @closed="closeTreeDialog"
  >
    <template>

      <!-- tree组件 -->
      <el-tree :data="allRoleRight" 
               :props="treeProps" 
               show-checkbox 
               node-key="id" 
               default-expand-all
               :default-checked-keys="checkedArrayById"
               ref="treeRef"
      />

      <!-- 按钮区域 -->
      <span slot="footer">
        <el-button @click="treeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendRoleRightRequest">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
// 网络
import { getRoleRightRequest, postUpdateRoleRight } from '@/network/roleControlRequest'

export default {
  data() {
    return {
      treeDialogVisible: false,
      allRoleRight: [], // 所有权限列表
      treeProps: { // tree组件循环渲染的节点
        label: 'authName',
        children: 'children'
      },
      checkedArrayById: [], // 当前项的权限id
      roleInfo: {}, // 当前角色数据
    }
  },
  methods: {
    async openDialog(data) { // 打开dialog组件函数
      this.roleInfo = data; // 暂存
      this.getNowItemAllRightId(data); // 获取所有权限项
      await this.getAllRoleRightData();
      return this.treeDialogVisible = true;
    },
    async getAllRoleRightData() { // 获取所有角色权限列表
      const {data, meta} = await getRoleRightRequest();
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }

      this.allRoleRight = data;
      return this.$message.success(meta.msg);
    },
    getNowItemAllRightId(data) { // 递归法获取当前选中项的所有权限Id然后渲染到组件上

      // 递归获取权利id方法
      data.children
      ? 
        data.children.forEach(item => {
          
          item.children ? this.getNowItemAllRightId(item) 
          : 
          this.checkedArrayById.push(item.id);
          // console.log(item.id, item);
        }) 
      : 
      '';
      // console.log('所有权限', this.allRoleRight);
      // console.log('所有选择项id', this.checkedArrayById);
      // console.log('用户', data);
    },
    closeTreeDialog() { // 关闭dialog弹框触发函数
      this.checkedArrayById = [];
      // console.log('关闭');
    },
    async sendRoleRightRequest() { // 发送网络请求
      const key = [
        ...this.$refs['treeRef'].getCheckedKeys(),
        ...this.$refs['treeRef'].getHalfCheckedKeys()
      ];
      const rids = key.join(',');

      // 发送服务器
      const { meta } = await postUpdateRoleRight(this.roleInfo.id, rids); 
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.treeDialogVisible = false; // 关闭dialog
      this.$bus.$emit('getRole'); // 刷新数据
      return this.$message.success(meta.msg);
    }
  },
  created() {
    this.$bus.$on('treeDialogOpen', data => this.openDialog(data));
  },
  destroyed() {
    // console.log('触发');
    this.$bus.$off('treeDialogOpen');
  }
}
</script>

<style lang="scss" scoped>
</style>



